<template>
    <view :class="['permission_tip', show ? 'permission_show' : '']" :style="{top: statusBarHeight + 'px'}" @click="showTipChange()">
    	<view class="permission_title">
    		{{title}}
    	</view>
		<view class="permission_content">
			{{content}}
		</view>
    </view>
</template>

<script >
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				statusBarHeight:0
			};
		},
		created() {
			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			showTipChange(){
				this.$emit('showTipChange');
			},
		}
	}
</script>

<style lang='scss' scoped>
    .permission_tip{
		padding: 20rpx;
		position: fixed;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		width: 90vw;
		border: 1rpx solid #d4d4d5;
		background-color: #fff;
		border-radius: 15rpx;
		z-index: 99999;
		opacity: 0;
		visibility: hidden;
		
		.permission_title{
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #000;
		}
		
		.permission_content{
			font-size: 28rpx;
			color: #666;
		}
	}
	.permission_show{
		opacity: 1;
		visibility: visible;
		transition-delay: .5s; 
	}
</style>